<template>
  <div class="app-container">

    <div class="big">
      <div class="title1">Redis内存实时占用情况(KB)</div>
      <div class="title2">Redis Key实时数量(个)</div>
      <v-chart class="left" :option="option1"/>
      <v-chart class="right" :option="option2"/>
    </div>
    <span>reids详细信息</span>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column align="center" label="key" width="300">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column>
      <el-table-column label="Description" width="500" align="center">
        <template slot-scope="scope">
          {{ scope.row.Description }}
        </template>
      </el-table-column>
      <el-table-column label="value" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.value }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'Property',
  components: {
    VChart
  },
  data() {
    return {

      list: [
        {
          'key': 'client_longest_output_list',
          'Description': '当前连接的客户端中，最长的输出列表',
          'value': '4.5.6'
        }, {
          'key': 'used_memory',
          'Description': '由 Redis 分配器分配的内存总量，以字节（byte）为单位',
          'value': '1112884'
        }, {
          'key': 'used_cpu_user_children',
          'Description': '将后台进程在用户态所占用的CPU时求和累计起来',
          'value': '513.72'
        }
      ],
      option1:
        {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [1200, 1132, 1001, 895, 890, 880, 860],
              type: 'line',
              areaStyle: {}
            }
          ]
        },
      option2:
        {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [800, 832, 801, 834, 1190, 1130, 1320],
              type: 'line',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgb(243,169,183)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgb(243,169,183)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }

            }
          ]
        }

    }
  }

}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;

  .big {
    width: 1100px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    .title1 {
      width: 500px;
      font-size: 17px;
      font-weight: 500;
    }

    .title2 {
      width: 500px;
      font-size: 17px;
      font-weight: 500;
    }

    .left {
      width: 500px;
      height: 350px;

    }

    .right {
      width: 500px;
      height: 350px;
    }
  }

}

</style>
